<template>
	<div id="cr-main">
		<Title>回收站</Title>
		<el-table
		  v-loading="!cptts"
		  :data="cptts?cptts:[]"
		  height="calc(100vh - 150px)"
		  :row-class-name="({row})=>`row-state-${row.his}`"
		  :header-cell-style="{background:'#fafafa'}"
		  class="w-full"
		  :row-key="row=>`htcpreay-${row.id}`"
		>
		  <el-table-column type="expand">
		    <template v-slot="{ row,$index }">
		      <div class="flex  items-center">
		        <el-avatar class="flex-shrink-0 mr-5" shape="square" :size="boxheight" :src="row.url" />
            <el-popconfirm
              class="mr-2"
              title="恢复这个比赛？"
              @confirm="recover(row.id,$index)"
            >
              <el-button slot="reference" type="primary" plain>恢复</el-button>
            </el-popconfirm>
            <el-popconfirm
              title="永久删除这个比赛？"
              confirm-button-type="danger"
              @confirm="deepdel(row.id,$index)"
            >
              <el-button slot="reference" type="danger" plain>永久删除</el-button>
            </el-popconfirm>
		      </div>
		    </template>
		  </el-table-column>
		  <el-table-column prop="name" label="比赛名称" />
		  <el-table-column prop="type" label="类型" 
        :filters="typefilters"
        :filter-method="(value,row)=>value == row.type"
        :formatter="(row, column, cellValue)=>CodeToType[cellValue]"
      />
		  <el-table-column prop="his" label="状态" 
        :formatter="(row, column, cellValue)=>cellValue? '完结':'未完结'"
      />
		</el-table>
	</div>
</template>

<script>
import { CodeToType } from '@/conf'
import { getdelcptt,recovercptt,deepdelcptt } from '@/api/htcp'
export default{
	data(){
		return{
      cptts:false,
      CodeToType:Object.freeze(CodeToType),
      boxheight:100
		}
	},
	async created() {
		const { cptts } = await getdelcptt()
    console.log({cptts})
    this.cptts = cptts
	},
	methods:{
    async deepdel(id,index){
      console.log(`删除${id}`)
      await deepdelcptt({id})
      this.cptts.splice(index,1)
    },
    async recover(id,index){
      console.log(`恢复${id}`)
      await recovercptt({id})
      this.cptts.splice(index,1)
      // const { info } = 
      // this.$router.push({name:'htcpadd'})
    }
		/**
     * 恢复
     * 永久删除
     */
	},
  computed:{
    typefilters(){
      const info = []
      for(const value in CodeToType)
        info.push({text:CodeToType[value],value})
      return info
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .row-state-true{
  background-color: #87ceeb3d !important;
}
::v-deep .row-state-false{
  background-color: #ffa50038 !important;
}
</style>
